<template>
	<view>
		<view class="LeftPopup">
			<u-popup :show="LeftPopup" mode="left" @close="close">
				<sidebar></sidebar>
			</u-popup>
			<u-popup :show="sharePopup" @send="getSharebol" mode="bottom" @close="closeShare">
				<share></share>
			</u-popup>
		</view>
		<view class="up_body" :style="{backgroundImage: `url(${bgUrl})`}">
			<view class="top_banner">
				<image class="left_list" src="@/static/Myimg/list.png" @click="getList" mode=""></image>
				<image class="share" src="@/static/Myimg/sahare.png" @click="goShare"
					style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
			<view class="person_box">
				<image @click="setImg" class="tou_photo" :src="user.profilePrcture" mode="aspectFill">
				</image>
				<view class="right_bottom">
					<image src="@/static/Myimg/plus.png"></image>
				</view>
				<view class="person_inf " @click="go_back">
					<h1 style="color: #fff;font-size: 40rpx; ">{{user.username}}</h1>
					<text style="color: rgb(174, 167, 157);">小红书号：{{user.uuid}}
						<image src="@/static/Myimg/QR -code.png" @click.stop="goER"
							style="width: 25rpx; height: 25rpx; top: 5rpx; margin-left: 10rpx;" mode=""></image>
					</text>
					<br /><text style="color: rgb(174, 167, 157);">IP属地：山西
						<image src="@/static/Myimg/not.png" style="width: 25rpx; height: 25rpx;" mode=""></image>
					</text>
				</view>
				<view>
					<text style="color: #fff; font-size: 30rpx; margin-top: -20rpx;"
						@click="editorJian">{{user.bio}}</text><br />
					<view class="sex_icon">
						<image src="@/static/Myimg/sex1.png" mode="" v-if="user.sex==1"></image>
						<image src="@/static/Myimg/sex2.png" mode="" v-else></image>
					</view>
				</view>
			</view>
			<view class="right_list">
				<ul class="fensi_list">
					<li>
						<text>{{user.followersCount}}</text>
						<br />
						<text style="color:rgba(255,255,255,0.8) ;">关注</text>
					</li>
					<li>
						<text>{{user.followeesCount}}</text>
						<br />
						<text style="color:rgba(255,255,255,0.8) ;">粉丝</text>
					</li>
					<li @click="show=true">
						<text>{{user.num}}</text>
						<br />
						<text style="color:rgba(255,255,255,0.8) ;">获赞与收藏</text>
					</li>
				</ul>
				<view class="">
				</view>
				<view class="editor_content" @click="goEdit">
					编辑资料
				</view>
				<view class="set_but" @click="shezhi">
					<image src="../../static/Myimg/set-up.png" mode=""></image>
				</view>
			</view>
			<ul class="buttom_list">
				<li @click="car">
					<image src="@/static/Myimg/shopping-cart.png" mode=""></image>
					<h4>购物车</h4>
					<br />
					<text>查看推荐好物</text>
				</li>
				<li @click="liulan">
					<image src="@/static/Myimg/history.png" mode=""></image>
					<h4>浏览记录</h4>
					<br />
					<text>看过的笔记</text>
				</li>
				<li @click="goQun">
					<image src="@/static/Myimg/qunliao.png" mode=""></image>
					<h4>群聊</h4>
					<br />
					<text>查看详情</text>
				</li>
			</ul>
			<view class="up_banner">
				<view class="up_list">
					<u-tabs :list="list" @click="qie" lineColor="#f72647" lineWidth="60rpx" lineHeight="-10rpx"
						:activeStyle="{
						color:'#323232',
						fontWeight:'600',
					}" :inactiveStyle="{
						color:'#8b8b8b',
						fontSize:'30rpx'
					}"></u-tabs>
					</u-tabs>
				</view>
				<image src="@/static/Myimg/Search.png" mode=""></image>
			</view>
		</view>
		<view class="under_body" v-if="noteBook">
			<view class="second_banner">
				<ul class="second_banner_list">
					<li :class="{ selected: selectedTab === 3 }" @click="selectTab(3)">公开</li>
					<li :class="{ selected: selectedTab === 2 }" @click="selectTab(2)">
						<image src="@/static/Myimg/lock.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
						私密
					</li>
					<li :class="{ selected: selectedTab === 0 }" @click="selectTab(0)">合集</li>
				</ul>
				<view v-show="selectedTab === 3" v-if="zz">
					<view class="" v-if="publicFlag">
						<!-- 公开内容 -->
						<image class="tupian" src="@/static/Myimg/photo.jpg" mode=""></image>
						<br />
						<text class="list_first_text">分享今日值得记录的瞬间</text>
						<view class="go_share">
							<text @click="goSend">去分享</text>
						</view>
					</view>
					<view class="publicnotes" v-if="!publicFlag">
						<view class="attention-content" v-for="(item,index) in publicNotes" :key="item.postId">
							<view class="attention-content-img" @click="as(index)">
								<image :src="item.url" mode="aspectFit" v-if="item.mediaType == 'image'"
									@click="as(index)"></image>
								<video :src="item.url" :controls="false" :show-center-play-btn="false" v-else
									@click="as(index)"></video>
							</view>
							<text class="attention-content-text" @click="as(index)">{{ item.title }}</text>
							<view class="attention-content-user">
								<view class="attention-content-user-img">
									<image :src="item.profilePrcture" mode="aspectFit"
										class="attention-content-user-img-image"></image>
									<text class="attention-content-user-text">{{ item.username }}</text>
								</view>
								<view class="attention-content-user-line" @click="discolor(index,publicNotes)"
									ref="redT">
									<image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit"
										class="attention-content-user-img-image" v-if="item.like"></image>
									<image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit"
										class="attention-content-user-img-image" v-else></image>
									<text>{{ item.likeNum }}</text>
								</view>
							</view>
						</view>
						
						<view class="bottom_kb">

						</view>

					</view>
				</view>
				<view v-show="selectedTab === 2">
					<view class="" v-if="privateFlag">
						<!-- 私密内容 -->
						<image class="list_first" src="@/static/Myimg/biji_default.jpg" mode=""></image>
						<br />
						<text class="list_first_text">没有任何私密笔记</text>
					</view>
					<view class="publicnotes" v-if="!privateFlag">
						<view class="attention-content" v-for="(item,index) in privateNotes" :key="item.postId">
							<view class="attention-content-img" @click="as(index)">
								<image :src="item.url" mode="aspectFit" v-if="item.mediaType == 'image'"
									@click="as(index)"></image>
								<video :src="item.url" :controls="false" :show-center-play-btn="false" v-else
									@click="as(index)"></video>
							</view>
							<text class="attention-content-text" @click="as(index)">{{ item.title }}</text>
							<view class="attention-content-user">
								<view class="attention-content-user-img">
									<image :src="item.profilePrcture" mode="aspectFit"
										class="attention-content-user-img-image"></image>
									<text class="attention-content-user-text">{{ item.username }}</text>
								</view>
								<view class="attention-content-user-line" @click="discolor(index,privateNotes)"
									ref="redT">
									<image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit"
										class="attention-content-user-img-image" v-if="item.like"></image>
									<image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit"
										class="attention-content-user-img-image" v-else></image>
									<text>{{ item.likeNum }}</text>
								</view>
							</view>
							
							
						</view>
						<view class="bottom_kb">

						</view>
					</view>
				</view>
				<view v-show="selectedTab === 0">
					<view class="" v-if="sumFlag">
						<!-- 合集内容 -->
						<image class="list_first" src="@/static/Myimg/biji_default.jpg" mode=""></image>
						<br />
						<text class="list_first_text">创建你的第一个合集</text>
						<view class="go_share">
							<text @click="goSend">去创建</text>
						</view>
					</view>
					<view class="publicnotes" v-if="!sumFlag">
						<view class="attention-content" v-for="(item,index) in sumNotes" :key="item.postId">
							<view class="attention-content-img" @click="as(index)">
								<image :src="item.url" mode="aspectFit" v-if="item.mediaType == 'image'"
									@click="as(index)"></image>
								<video :src="item.url" :controls="false" :show-center-play-btn="false" v-else
									@click="as(index)"></video>
							</view>
							<text class="attention-content-text" @click="as(index)">{{ item.title }}</text>
							<view class="attention-content-user">
								<view class="attention-content-user-img">
									<image :src="item.profilePrcture" mode="aspectFit"
										class="attention-content-user-img-image"></image>
									<text class="attention-content-user-text">{{ item.username }}</text>
								</view>
								<view class="attention-content-user-line" @click="discolor(index,sumNotes)" ref="redT">
									<image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit"
										class="attention-content-user-img-image" v-if="item.like"></image>
									<image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit"
										class="attention-content-user-img-image" v-else></image>
									<text>{{ item.likeNum }}</text>
								</view>
							</view>

						</view>
						
						<view class="bottom_kb">

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="under_body collect_list" v-if="collect">
			<view class="second_banner">
				<ul class="second_banner_list">
					<li :class="{ selected: selectedTab === 5 }" @click="selectTab(5)">笔记</li>
					<li :class="{ selected: selectedTab === 6 }" @click="selectTab(6)">
						<image src="@/static/Myimg/lock.png" style="width: 30rpx;
			         height: 30rpx;" mode=""></image>
						专辑
					</li>
				</ul>
				<view class v-show="selectedTab === 5">
					<!-- 收藏的笔记 -->
					<image class="tupian" src="@/static/Myimg/photo.jpg" mode=""></image>
					<br />
					<text class="list_first_text" style="padding-left: 70rpx;">暂无公开内容</text>
					<view class="go_share">
						<text @click="goSend">去发布</text>
					</view>
				</view>
				<view v-show="selectedTab === 2">
					<!-- 收藏的专辑 -->
					<image class="list_first" src="@/static/Myimg/biji_default.jpg" mode=""></image>
					<br />
					<text class="list_first_text">您还没有创建任何专辑哦</text>
				</view>
			</view>
		</view>
		<view class="under_body collect_list" v-if="zan">
			<view class="" v-if="true">
				<!-- 私密内容 -->
				<image class="list_first" src="@/static/Myimg/biji_default.jpg" mode=""></image>
				<br />
				<text class="list_first_text">没有点赞过任何笔记</text>
			</view>
			<view class="publicnotes" v-if="sumFlag">
				<view class="attention-content" v-for="(item,index) in sumNotes" :key="item.postId">
					<view class="attention-content-img" @click="as(index)">
						<image :src="item.url" mode="aspectFit" v-if="item.mediaType == 'image'" @click="as(index)">
						</image>
						<video :src="item.url" :controls="false" :show-center-play-btn="false" v-else
							@click="as(index)"></video>
					</view>
					<text class="attention-content-text" @click="as(index)">{{ item.title }}</text>
					<view class="attention-content-user">
						<view class="attention-content-user-img">
							<image :src="item.profilePrcture" mode="aspectFit" class="attention-content-user-img-image">
							</image>
							<text class="attention-content-user-text">{{ item.username }}</text>
						</view>
						<view class="attention-content-user-line" @click="discolor(index,sumNotes)" ref="redT">
							<image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit"
								class="attention-content-user-img-image" v-if="item.like"></image>
							<image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit"
								class="attention-content-user-img-image" v-else></image>
							<text>{{ item.likeNum }}</text>
						</view>
					</view>
				</view>
				<view class="bottom_kb">

				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" round="50" @close="closeCollection">
			<view class="collectioContent">
				<view class="modal-body">
					<h3>获赞与收藏</h3>
					<view class="">
						<u-line margin=" 30rpx auto 30rpx" length="360px"></u-line>
					</view>
					<ul class="modal-body-content">
						<li>
							<image src="@/static/Myimg/noteIcon.png" mode=""></image>
							<text>当前发布笔记数 <span>{{user.noteCount}}</span></text>
						</li>
						<li>
							<image src="@/static/Myimg/notexin.png" mode=""></image>
							<text>当前获得点赞数 <span>{{}}</span></text>
						</li>
						<li>
							<image src="@/static/Myimg/notecoll.png" mode=""></image>
							<text>当前获得收藏数 <span>{{}}</span></text>
							<text>当前获得点赞数 <span>{{user.likeCount}}</span></text>

							<!-- <text>当前获得点赞数 <span>{{dianzan.likeCount}}</span></text> -->
						</li>
						<li>
							<image src="@/static/Myimg/notecoll.png" mode=""></image>
							<text>当前获得收藏数 <span>{{user.collectionCount}}</span></text>

						</li>
					</ul>
				</view>
				<button @click="closeModal()">我知道了</button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<!-- <u-cell :title="item.title" title-style='red' v-for="(item, index) in list2" :key="index"
			@click="showToast(item)" class="sav" :border="false" :style="{ 'border-bottom': 'none'}">
		</u-cell> -->
	</view>
</template>
<script>
	import sidebar from '@/pages/My/components/sidebar.vue';
	import share from '@/pages/My/components/share.vue'
	export default {
		data() {
			return {
				tempNotes: [], //临时存放的笔记
				publicNotes: [], //公开笔记
				publicFlag: true,
				privateNotes: [], //公开笔记
				privateFlag: true,
				sumNotes: [],
				sumFlag: true,
				list2: [{
					type: 'default',
					title: '保存',
					message: ""
				}],
				page: 1,
				size: 20,
				status: "loading",
				user: {

				},
				dianzan: {

				},
				item: {
					//笔记图片路径
					url: '',
					//笔记标题
					content: '',
					//头像
					profilePrcture: '',
					//用户名
					username: '',
					//点赞数
					likeNum: '',

				},
				show: false,
				list: [{
						name: '笔记'
					},
					{
						name: '收藏'
					},
					{
						name: '赞过'
					}
				],
				noteBook: true,
				collect: false,
				zan: false,
				history: [],
				LeftPopup: false,
				sharePopup: false,
				selectedTab: 0,
				modalVisible: false, // 控制拟态框显示与否
				zz: true,
				ispublicnotes:false
			}
		},
		onLoad() {
			let userId = uni.getStorageSync("id")
			//查用户头像,名字,小红书号,粉丝
			this.request("/userhomepage/getuserhome", "get", {
				userId: userId
			}).then( //接口，请求方式，参数1
				(res) => {
					console.log(res);
					//头像
					this.user = res.data.result.result;
					this.bgUrl = this.user.bgUrl
					console.log(this.bgUrl);
					
				}).catch((err) => {
				console.log(err);
			});
			//查询当前用户的笔记
			// this.request("/MyNodes/getMyNodesByStatus","post",{userId:userId,status:}).then((res)=>{}).catch((err)=>{})
		},
		components: {
			sidebar,
			share
		},
		// mounted() {
		//   // 调用后端接口获取带有用户头像的二维码图片数据
		//   this.fetchQRCode();
		// },
		methods: {
			as(e) {
				console.log(e);
				uni.navigateTo({
					url: `/pages/index/viewAsText/viewAsText?postId=${this.tempNotes[e].postId}&mediaType=${this.tempNotes[e].mediaType}&followeeId=${this.tempNotes[e].userId}`,
				});
			},
			selectTab(e) {
				this.selectedTab = e;
				if (this.selectedTab == 3) {
					this.selectPublic(this.selectedTab);
					this.publicNotes = this.tempNotes
					if (this.publicNotes.length > 0) {
						this.publicFlag = false;
					}

				} else if (this.selectedTab == 2) {
					this.selectPublic(2);
					this.privateNotes = this.tempNotes
					if (this.privateNotes.length > 0) {
						this.privateFlag = false;
					}
					console.log(this.privateFlag);
				} else if (this.selectedTab == 0) {
					//查全部
					this.selectPublic(null);
					this.sumNotes = this.tempNotes
					if (this.sumNotes.length > 0) {
						this.sumFlag = false;
					}

				}
			},
			discolor(e, notes) {
				console.log(notes[e].like);
				notes[e].like = !notes[e].like;
				if (notes[e].like) {
					this.request(`/like/goLike?postId=${notes[e].postId}&userId=${uni.getStorageSync("id")}`, "post")
						.then((res) => {
							console.log(res);
							notes[e].likeNum++;
						})
						.catch((err) => {
							console.log(err);
						});
				} else {
					this.request(`/like/delLike?postId=${notes[e].postId}&userId=${uni.getStorageSync("id")}`, "delete")
						.then((res) => {
							console.log(res);
							notes[e].likeNum--;
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			selectPublic(e) {
				this.getPublicNotes(e);
			},
			//查询用户发布公开的的笔记
			getPublicNotes(e) {
				this.request("/userNotes/addUserNotes", "post", {
					userId: uni.getStorageSync("id"),
					pageNum: this.page,
					size: this.size,
					status: e
				}).
				then(res => {
					console.log(res);
					if (res.data.code == 200) {
						this.tempNotes = res.data.obj.obj.list;
						if (this.tempNotes.length % 2 == 1) {
							ispublicnotes=true
						}
						// 清空历史记录数组
						this.tempNotes = [];
						// 合并并去重历史记录数据
						res.data.obj.obj.list.forEach((item) => {
							// 判断是否已经存在相同的 postId
							if (!this.tempNotes.some((historyItem) => historyItem.postId === item
								.postId)) {
								this.tempNotes.push(item);
							}
						});
						console.log(this.tempNotes);
					}

				}).catch(err => {
					console.log(err);
				})
			},
			getSharebol(res) {
				console.log(res);
			},
			goSend() {
				uni.navigateTo({
					url: "/pages/issue/issue"
				})
			},
			qie(e) {
				if (e.index == 0) {
					this.collect = false;
					this.zan = false;
					this.noteBook = true;
				} else if (e.index == 1) {
					this.collect = true;
					this.zan = false;
					this.noteBook = false;
				} else if (e.index == 2) {
					this.collect = false;
					this.zan = true;
					this.noteBook = false;
				}
			},
			closeShare() {
				this.sharePopup = !this.sharePopup
			},
			getList() {
				this.LeftPopup = !this.LeftPopup
			},
			close() {
				this.LeftPopup = !this.LeftPopup
			},
			closeCollection() {
				this.show = !this.show
			},
			go_back() {
				uni.navigateTo({
					url: "/pages/My/setImg/lookBackground?imgUrl=" + encodeURIComponent(this.user.bgUrl)
				})
			},
			editorJian() {
				uni.navigateTo({
					url: "/pages/My/updateuser"
				})
			},
			goEdit() {
				uni.navigateTo({
					url: "/pages/My/updateuser?user=" + encodeURIComponent(JSON.stringify(this.user))
				})
			},
			goShare() {
				this.sharePopup = !this.sharePopup
			},
			setImg() {
				uni.navigateTo({
					url: "/pages/My/setImg/setImg?imgUrl=" + encodeURIComponent(this.user.profilePrcture)
				})
			},
			closeModal() {
				this.show = false;
			},
			shezhi() {
				uni.navigateTo({
					url: "/pages/shezhi/shezhi"
				})
			},

			goER(event) {
				// 阻止事件冒泡
				event.stopPropagation();
				// 跳转到 ERpage 页面，并传递用户信息
				uni.navigateTo({
					url: "/pages/My/ERpage?user=" + encodeURIComponent(JSON.stringify(this.user))
				});
			},

			car() {
				uni.navigateTo({
					url: "/pages/Productdetails/Cart"
				})
			},
			lingan() {
				uni.navigateTo({
					url: "/pages/createcenter/CreativeCenter"
				})
			},
			liulan() {
				uni.navigateTo({
					url: "/pages/My/history/history"
				})
			},
			goQun() {
				uni.navigateTo({
					url: "/pages/My/groupChat"
				})
			}
		}
	}
</script>

<style scoped>
	.bottom_kb {
		width: 100%;
		margin-top: 120rpx;
	}

	ul {
		list-style: none;
	}

	a {
		color: #333;
		text-decoration: none;
	}

	.footer {
		margin-top: 300rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		padding: 10px;
		color: #333;
		/* box-shadow: 0 -2px 4px rgba(0,0,0,0.1); */
		font-size: 25rpx;
	}

	.up_body {
		width: 100%;
		height: 780rpx;
		/* background-image: url(https://mer-1325659292.cos.ap-nanjing.myqcloud.com/defaultBg.jpg); */
		/* 背景层的混合模式（正片叠底模式） */
		background-blend-mode: multiply;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: rgba(82, 82, 82, 0.8);
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.top_banner {
		width: 100%;
		height: 100rpx;
		/* background-color: black; */
		margin-top: 15rpx;
		position: absolute;
		top: 0;
		display: flex;
		justify-content: space-between;
	}

	.top_banner image {
		width: 50rpx;
		height: 50rpx;
	}

	.left_list {
		padding-left: 20rpx;
	}

	.share {
		padding: 10rpx 25rpx 0 0;
	}

	.person_box {
		width: 500rpx;
		height: 300rpx;
		margin: 120rpx 0 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.person_box .tou_photo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.person_inf {
		width: 340rpx;
		height: 78rpx;
		margin-left: 20rpx;
	}

	.person_inf text {
		font-size: 20rpx;

	}

	.person_inf text image {
		top: 8rpx;
		left: 8rpx;

	}

	.right_bottom {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: rgb(253, 232, 1);
		/* display: inline-block; */
		/* margin-left: -30px; */
		margin-top: 100rpx;
		margin-left: -30px;
		z-index: 1;
	}

	.right_bottom image {
		width: 30rpx;
		height: 30rpx;
		margin: 10rpx 10rpx;
	}

	.sex_icon {
		width: 70rpx;
		height: 50rpx;
		border-radius: 20rpx;
		background-color: rgba(93, 90, 81, 0.7);
		margin-top: 15rpx;
	}

	.sex_icon image {
		width: 35rpx;
		height: 32rpx;
		margin: 8rpx 18rpx;
	}

	.fensi_list {
		width: 300rpx;
		height: 64rpx;
		list-style: none;
		color: #fff;
		font-size: 25rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
		margin-top: 20px;
		padding: 0 0;
	}

	.editor_content {
		width: 180rpx;
		height: 67rpx;
		background-color: rgba(74, 72, 60, 0.3);
		color: #fff;
		border: 2rpx solid #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 67rpx;
		margin-top: 40rpx;
		/* margin: 40rpx 0  0 20rpx ; */
	}

	.set_but image {
		width: 50rpx;
		height: 50rpx;
		padding: 8rpx 20rpx;
	}

	.set_but {
		width: 90rpx;
		height: 67rpx;
		background-color: rgba(74, 72, 60, 0.3);
		color: #fff;
		border: 2rpx solid #fff;
		border-radius: 40rpx;
		margin-top: 40rpx;
	}

	.right_list {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-evenly;
		margin-top: -130rpx;

	}

	.buttom_list {
		width: 100%;
		height: 150rpx;
		/* background-color: aqua; */
		display: flex;
		overflow-x: auto;
		padding: 0;
		margin: -100rpx 0 30rpx 20rpx;
	}

	.buttom_list::-webkit-scrollbar {
		display: none;
		/* 对于Webkit浏览器隐藏滚动条 */
	}

	.buttom_list li {
		width: 210rpx;
		height: 100rpx;
		background-color: rgba(75, 72, 63, 0.6);
		margin: 25rpx 10rpx;
		color: rgb(145, 141, 132);
		font-size: 24rpx;
		text-align: center;
		border-radius: 15rpx;
		flex-shrink: 0;
	}

	.buttom_list li image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: top;
		padding-top: 10rpx;
	}

	.buttom_list li h4 {
		color: #fff;
		display: inline-block;
		font-size: 28rpx;
		margin-left: 10rpx;
		padding-top: 10rpx;
	}

	.up_banner {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
	}

	.under_body {
		width: 100%;
		height: 830rpx;
		background-color: rgb(250, 250, 250);
	}

	.up_list {
		width: 500rpx;
		height: 70rpx;
		margin: 10rpx 0 0 180rpx;
	}

	.up_banner image {
		width: 45rpx;
		height: 45rpx;
		padding: 20rpx 50rpx 0 0;
	}

	.second_banner {
		width: 100%;
		height: 90rpx;
		border-bottom: 2rpx solid rgb(189, 194, 200);
	}

	.second_banner_list {
		display: flex;
		justify-content: flex-start;
		background-color: rgb(250, 250, 250);
	}

	.second_banner_list li.selected {
		color: gray;
		/* 选中时的颜色 */
	}

	.second_banner_list li {
		margin-right: 50rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		display: inline-block;
		cursor: pointer;
		color: black;
		/* 未选中时的颜色 */
	}

	.second_banner image {
		/* width: 30rpx;
		height: 30rpx; */
	}

	.tupian {
		width: 180rpx;
		height: 150rpx;
		margin-left: 250rpx;
		margin-top: 130rpx;
	}

	.list_first {
		width: 280rpx;
		height: 180rpx;
		margin-top: 100rpx;
		margin-left: 200rpx;
	}

	.list_first_text {
		display: block;
		margin-left: 190rpx;
	}

	.go_share {
		width: 180rpx;
		height: 80rpx;
		border-radius: 20rpx;
		border: 2rpx solid rgb(219, 219, 219);
		text-align: center;
		line-height: 80rpx;
		margin-left: 250rpx;
		margin-top: 30rpx;
	}

	.zan_list {
		display: flex;
		/* flex-direction: column; */
		justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.zan_list .zan_item {
		width: 350rpx;
		height: 630rpx;

		border-radius: 0 0 25rpx 25rpx;

	}

	.zan_list .zan_item text {
		font-size: 35rpx;
		letter-spacing: 2rpx;
	}

	.zan_list .zan_item .item_tu {
		width: 350rpx;
		height: 400rpx;
		border-radius: 25rpx 25rpx 0 0;
		margin-top: 20rpx;
	}

	.zan_under {
		width: 350rpx;
		height: 70rpx;
		margin-top: 23rpx;
		border-radius: 0 0 25rpx 25rpx;
		display: flex;
		margin-bottom: 50rpx;
	}

	.zan_under image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		border-radius: 50%;
	}

	.zan_item .zan_under text {
		font-size: 23rpx;
		color: #000;
		line-height: 70rpx;
		display: block;
		margin-left: 10rpx;
	}

	.zan_item .zan_under .aixin {
		width: 30rpx;
		height: 30rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.collectioContent {
		width: 500rpx;
		height: 650rpx;

	}

	.collectioContent .modal-body {
		margin-top: 30rpx;
		height: 500rpx;
	}

	.collectioContent .modal-body h3 {
		text-align: center;
		font-size: 40rpx;
		font-weight: 500;
	}

	.collectioContent button {
		width: 400rpx;
		height: 80rpx;
		background-color: #ff2442;
		color: #fff;
		border-radius: 50rpx;
		line-height: 80rpx;
		margin-top: -30rpx;

	}

	.modal-body-content li {
		height: 100rpx;
		margin-left: -20rpx;
		margin-top: 10rpx;
	}

	.modal-body-content li image {
		width: 80rpx;
		height: 78rpx;
		border-radius: 50%;
		margin-top: 10rpx;
	}

	.modal-body-content li text {
		display: inline-block;
		vertical-align: middle;
		margin-top: -60rpx;
		margin-left: 20rpx;
		color: #979797;
	}

	.modal-body-content li span {
		color: #000000;
		margin-left: 20rpx;
	}

	.publicnotes {
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		margin-top: 10rpx;
		flex-wrap: wrap;
	}

	.attention-content {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 30rpx;
		width: 330rpx;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 16rpx;
	}

	.attention-content-img {
		width: 100%;
		height: 470rpx;
		display: flex;
		align-items: center;

	}

	.attention-content-img image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.attention-content-text {
		font-size: 35rpx;
		font-family: "微软雅黑";
		display: block;
		padding: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.attention-content-user {
		margin-left: 16rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.attention-content-user-img {

		display: flex;
		justify-content: space-evenly;
	}

	.attention-content-user-img-image {
		border-radius: 50%;
		width: 45rpx;
		height: 45rpx;
		object-fit: cover;
		object-position: center;
	}

	.attention-content-user-line {
		display: flex;
		align-items: center;
	}
.publicnotes:last-child {
    display: flex;
    justify-content: flex-start;
}


	
</style>